<style type="text/css">
    .page .header {
        position: fixed;
        top: 0px;
        width: 960px;
        z-index: 100;
    }

    .page .content {
        padding-top: 8em;
    }

</style>
<div id="gal_lists">
</div>
<div id="smorebtncontainer" class="hidden">
    <button style="width: 100%;" onClick="javascript:showMore();">Tampilkan lebih banyak</button>
</div>
<div id="loadingbtncontainer" class="hidden">
    <button style="width: 100%;" disabled="disabled">Loading</button>
</div>
<script type="text/javascript">
        var curPage = 0;

        jQuery(document).ready(function() {
            showMore();
        });

        function showMore() {
            $("#smorebtncontainer").addClass("hidden");
            $("#loadingbtncontainer").removeClass("hidden");
            $.ajax({
                url: "<?php echo site_url("service/getDataJSON"); ?>/galbar",
                method: "POST",
                dataType: "json", data: {
                    page: curPage,
                    perpage: 9
                },
                success: function(data) {
                    if (data.length > 0) {
                        curPage++;
                        $("#smorebtncontainer").removeClass("hidden");
                        $("#loadingbtncontainer").addClass("hidden");
                        for (var i = 0; i < data.length; i++) {
                            var gal = data[i];
                            var newGal = "";
                            newGal += "<div class='gal_item id" + gal.id + "' style='padding: 0.5em 0.5em; display: inline-block; width: 200px;'>";
                            newGal += "<div>";
                            newGal += "<h1><a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'>" + gal.judul + "</a></h1>";
                            newGal += "</div>";
                            newGal += "<div>";
                            newGal += gal.approved + " oleh <a href='javascript:void(0);'>" + gal.poster_name + "</a> - " + gal.points + " points";
                            newGal += "</div>";
                            newGal += "<div style='margin: 1em 0;'>";
                            newGal += "<img src='" + gal.tmb + "' />";
                            newGal += "</div>"
                            newGal += "<div class='navbtns' style='text-align: right;'>";
                            newGal += "<a href='javascript:void(0);' onClick='javascript:askHapus(" + gal.id + ");'><button>Hapus</button></a>";
                            newGal += "</div>";
                            newGal += "<hr />";
                            newGal += "</div>";
                            $("#gal_lists").append(newGal);
                        }
                        if (data.length < 9) {
                            $("#smorebtncontainer").addClass("hidden");
                            $("#loadingbtncontainer").addClass("hidden");
                        }
                    } else {
                        $("#smorebtncontainer").addClass("hidden");
                        $("#loadingbtncontainer").addClass("hidden");
                    }
                }
            });
        }

        function askHapus(id) {
            if (confirm("Yakin ingin menghapus galeri?")) {
                doHapus(id);
            }
        }

        function doHapus(id) {
            $.ajax({
                url: "<?php echo site_url("galeri/delete"); ?>",
                method: "POST",
                dataType: "json", data: {
                    id: id
                },
                success: function(data) {
                    $(".gal_item.id" + id).remove();
                }
            });
        }
</script>